<template>
    <div class="person">
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { type IPerson, type Persons1, type Persons2 } from '@/types';
// 接口类型
let person: IPerson = { id: '1', name: '张三', age: 18 }
// 范型
let persons1: Array<IPerson> = [
    { id: '1', name: '张三', age: 18 },
    { id: '2', name: '李四', age: 19 },
    { id: '3', name: '王五', age: 20 },
]
let persons2: IPerson[] = [
    { id: '1', name: '张三', age: 18 },
    { id: '2', name: '李四', age: 19 },
    { id: '3', name: '王五', age: 20 },
]
let persons3: Persons1 = [
    { id: '1', name: '张三', age: 18 },
    { id: '2', name: '李四', age: 19 },
    { id: '3', name: '王五', age: 20 },
]
let persons4: Persons2 = [
    { id: '1', name: '张三', age: 18 },
    { id: '2', name: '李四', age: 19 },
    { id: '3', name: '王五', age: 20 },
]
</script>

<!-- scoped: 局部样式,避免同名选择器冲突 -->
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>